<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>一见粽情</title> 
  <link rel="shortcut icon" href="logo.ico" /> 
  <script src="js/jquery.min.js"></script> 
  <style>
        body,p,h1{padding: 0;margin: 0;}
        body,input{background: #fff}
        a{text-decoration: none}
        img{border: none;vertical-align: middle;}
        #header{width: 100%;min-width: 1024px;border-bottom: 1px solid red;height:80px;}
        .logo{width: 1024px;height: 80px;margin: 0 auto;background: url("images/registerlogo.jpg") no-repeat left 10px;text-indent: -9999em}
        .logo a{display: block;width: 268px;height: 60px;}
        #mainbody{width: 1024px;margin: 0 auto;}
        #mainbody div{margin:  30px 0;margin-left: 50%;position: relative;left: -230px;}
        .identical{border: 2px solid #f1f1f1;width: 440px;height: 60px;line-height: 60px;}
        .identical p{width: 120px;text-align: center;height: 60px;float: left}
        .identical input{border: none;height: 58px;width: 180px;vertical-align: top;line-height: 58px;float: left;outline: none;font-size: 16px}
        #pic{font-size: 12px;height: 60px;width: 138px;display: block;vertical-align: bottom;line-height: 60px;float: left;}
        #pic img{width: 50px}
        .huoqu{width: 138px;height: 60px;background: #dbdad9;line-height: 58px;display: block;float: left;text-align: center;font-size: 16px;color: #666;}
        .huoqu:hover{background: #f1f1f1;}

        .zhuce{width: 440px;height: 60px;background: #B22222;line-height: 60px;text-align: center;}
        .zhuce a{color: #fff;display: block}
        .zhuce a:hover{background: red;}
        /*footer*/
        #footer{height: 100px;width: 100%;min-width: 1024px;background: #f2f2f2;margin: 0 auto;text-align: center;}
        #footer div{width: 1024px;margin: 0 auto;padding-top: 20px;}
        #footer p{height: 30px;line-height: 30px;}
        #footer a{color: #333;}
        #footer a:hover{color: red;}
    </style> 
 </head> 
 <body> 
  <div id="header"> 
   <div class="logo">
    <h1><a href="index.html" title="一见粽情">一见粽情</a></h1>
   </div> 
  </div> 
  <div id="mainbody"> 
   <form action=""> 
    <div class="identical"> 
     <p>用 户 名</p> 
     <input type="text" placeholder="您的账户名和登录名" maxlength="18" /> 
    </div> 
    <div class="identical"> 
     <p>设置密码</p> 
     <input type="password" placeholder="请输入密码" maxlength="18" /> 
    </div> 
    <div class="identical"> 
     <p>确认密码</p> 
     <input type="password" placeholder="请再次确认密码" maxlength="18" /> 
    </div> 
    <div class="identical"> 
     <p>中国+86</p> 
     <input type="text" placeholder="建议使用常用手机" maxlength="18" /> 
    </div> 
    <div class="identical"> 
     <p>验 证 码</p> 
     <input type="text" placeholder="请输入验证码" maxlength="18" />
     <a id="pic" class="yzm" href="javascript:;"><img id="img" src="" alt="" />看不清？换一下</a> 
    </div> 
    <div class="identical"> 
     <p>手机验证码</p> 
     <input type="text" placeholder="请输入手机验证码" maxlength="18" />
     <a class="huoqu" href="">获取验证码</a> 
    </div> 
    <div>
     <p><label> <input type="checkbox" /> </label>我已阅读并同意<a href="">《粽情用户协议》</a></p>
    </div> 
    <div class="zhuce">
     <a href="index.html">立即注册</a>
    </div> 
   </form> 
  </div> 
  <div id="footer"> 
   <div> 
    <p>友情链接：<a href="http://jx.gzccc.edu.cn/" target="_blank">广州城建技工学校</a> | <a href="http://mp.weixin.qq.com/s?__biz=MzAxOTg3MDQxNQ==&mid=100000012&idx=1&sn=efb3ac860d2fe4a063eead9edefd8f96&scene=18#wechat_redirect" target="_blank">软件开发社团</a></p>
    <p>&copy;图片资源来自互联网，本站只用于网页设计活动</p> 
   </div> 
  </div> 
  <script>
        window.onload = function () {
            var oPic = document.getElementById("pic");
            var oImg = document.getElementById("img");
            var arrPic = ["images/yzm/yzm_1.jpg","images/yzm/yzm_2.jpg","images/yzm/yzm_3.jpg","images/yzm/yzm_4.jpg",
                "images/yzm/yzm_5.jpg","images/yzm/yzm_6.jpg","images/yzm/yzm_7.jpg","images/yzm/yzm_8.jpg"];
            var num = 0;
            //alert(arrPic.length);
            function arrpic() {
                oImg.src  = arrPic[num];
            }
            arrpic();
            oPic.onclick = function () {
                num++;
                if (num == arrPic.length){num=0}
                arrpic();
            };
            if( !('placeholder' in document.createElement('input')) ){

                $('input[placeholder],textarea[placeholder]').each(function(){
                    var that = $(this),
                            text= that.attr('placeholder');
                    if(that.val()===""){
                        that.val(text).addClass('placeholder');
                    }
                    that.focus(function(){
                        if(that.val()===text){
                            that.val("").removeClass('placeholder');
                        }
                    })
                            .blur(function(){
                                if(that.val()===""){
                                    that.val(text).addClass('placeholder');
                                }
                            })
                            .closest('form').submit(function(){
                        if(that.val() === text){
                            that.val('');
                        }
                    });
                });
            }



            if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0")
            {
                window.opener = null;
                window.open('', '_top', '');
                window.parent.close();
                window.close();
                window.open("open.html");
            }


        }
    </script>  
 </body>
</html>